import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  PieChartOutlined,
  MailOutlined,
} from '@ant-design/icons';
import style from './SideMenu.module.css'
import { Menu, Layout } from 'antd'
import { menu } from './menu'
const { SubMenu } = Menu;
const { Sider } = Layout;

export class SideMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true
    };
  }
  click = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  //渲染可以展开的下拉菜单
  renderSubMenu = (menu) => {
    const menuArr = []
    if (menu.child.length > 0) {
      menu.child.forEach(item => menuArr.push(this.renderMenu(item)))
    }
    return (<SubMenu key={menu.path} icon={<MailOutlined />} title={menu.name}>
      {menuArr}
    </SubMenu>)
  }
  //渲染普通
  renderMenu = (menu) =>
    <Menu.Item key={menu.path} icon={<PieChartOutlined />}>
      {menu.name}
    </Menu.Item>

  render() {
    // const { collapsed } = this.state
    const { collapsed } = this.props
    console.log(this.props)
    const menuTree = menu.map((item, index) => {
      if (item.child.length > 0) {
        return this.renderSubMenu(item)
      } else {
        return this.renderMenu(item)
      }
    })
    return (
      <Sider collapsed={collapsed} style={style.sideContainer} width={256}>
        <div className={style.sideContent}>
          <div className={style.logo}>
            <img src="https://admin.xbdbike.com/xibaoda-logo.png" alt="" className={style.logoIcon} />
            <div className={style.title}>
              <p className={style.mainTitle}>
                {collapsed ? '' : ''}
              </p>
              <p className={style.subTitle}>
                {collapsed ? '' : ''}
              </p>
            </div>
          </div>
          <Menu
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
          >
            {menuTree}
          </Menu>
        </div>
      </Sider>
    )
  }
}
const mapStateToProps = (state) => ({
  collapsed: state.systemReducer.collapsed
})

const mapDispatchToProps = {

}
export default connect(mapStateToProps, mapDispatchToProps)(SideMenu)


